<template>
  <div class="version-control-container">
    <div class="page-header">
      <div class="title">文件版本控制</div>
      <div class="subtitle">Git风格版本管理</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/electronic-archive"><LaptopOutlined />电子档案管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><BranchesOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="stat-card">
            <BranchesOutlined class="stat-icon" />
            <div>
              <div class="stat-title">版本数量</div>
              <div class="stat-value">{{ stats.versions }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <CodeOutlined class="stat-icon" />
            <div>
              <div class="stat-title">今日提交</div>
              <div class="stat-value">{{ stats.commits }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <ForkOutlined class="stat-icon" />
            <div>
              <div class="stat-title">合并次数</div>
              <div class="stat-value">{{ stats.merges }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <UndoOutlined class="stat-icon" />
            <div>
              <div class="stat-title">回滚次数</div>
              <div class="stat-value">{{ stats.rollbacks }}</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="version-management">
      <a-row :gutter="[24, 24]">
        <a-col :span="12">
          <a-card title="版本树" :bordered="false">
            <a-tree :tree-data="versionTree" :show-line="true" :default-expanded-keys="['1']">
              <template #title="{ title, version, author, time }">
                <div class="version-node">
                  <span class="version-title">{{ title }}</span>
                  <a-tag size="small">{{ version }}</a-tag>
                  <div class="version-meta">{{ author }} · {{ time }}</div>
                </div>
              </template>
            </a-tree>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="版本详情" :bordered="false">
            <div v-if="selectedVersion">
              <a-descriptions :column="1" bordered>
                <a-descriptions-item label="版本号">{{ selectedVersion.version }}</a-descriptions-item>
                <a-descriptions-item label="提交者">{{ selectedVersion.author }}</a-descriptions-item>
                <a-descriptions-item label="提交时间">{{ selectedVersion.time }}</a-descriptions-item>
                <a-descriptions-item label="提交信息">{{ selectedVersion.message }}</a-descriptions-item>
              </a-descriptions>

              <div style="margin-top: 16px">
                <a-space>
                  <a-button type="primary">查看详情</a-button>
                  <a-button>比较版本</a-button>
                  <a-button>回滚到此版本</a-button>
                </a-space>
              </div>
            </div>
            <a-empty v-else description="选择版本查看详情" />
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="version-actions">
      <a-card title="版本操作" :bordered="false">
        <a-space>
          <a-button type="primary"><PlusOutlined />新建版本</a-button>
          <a-button><ForkOutlined />合并分支</a-button>
          <a-button><BranchesOutlined />创建分支</a-button>
          <a-button><HistoryOutlined />查看历史</a-button>
        </a-space>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, LaptopOutlined, BranchesOutlined, CodeOutlined, ForkOutlined, UndoOutlined, PlusOutlined, HistoryOutlined } from '@ant-design/icons-vue'

const stats = reactive({
  versions: 1256,
  commits: 89,
  merges: 23,
  rollbacks: 5
})

const selectedVersion = ref(null)

const versionTree = ref([
  {
    title: 'v3.0.0 - 重大版本更新',
    key: '1',
    version: 'v3.0.0',
    author: '李时珍',
    time: '2023-12-01',
    children: [
      { title: 'v3.0.1 - 修复关键漏洞', key: '1-1', version: 'v3.0.1', author: '王守仁', time: '2023-12-02' },
      { title: 'v3.0.2 - 性能优化', key: '1-2', version: 'v3.0.2', author: '苏东坡', time: '2023-12-03' }
    ]
  }
])
</script>

<style lang="scss" scoped>
.version-control-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section,
  .version-management,
  .version-actions {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        font-size: 32px;
        color: $secondary-color;
      }

      .stat-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
      }
    }

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .version-node {
    .version-title {
      font-weight: bold;
      margin-right: 8px;
    }

    .version-meta {
      font-size: 12px;
      color: $text-secondary;
      margin-top: 4px;
    }
  }
}
</style>
